<template>
  <div class="yaoCenter">
    <!-- 头像 -->
    <div id="bind">
      <img src="http://image.360lj.com/images/defaulhead.png" />
      <p>天空的雾来的漫不经心</p>
    </div>
    <!-- 我的订单 -->
    <div class="myorder">
      <van-cell title="我的订单" icon="cart" value="全部订单">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="arrow-icon" />
        </template>
      </van-cell>
      <!-- 宫格订单详情  优化-->
      <van-grid class="orderDetail">
        <van-grid-item
          v-for="item in orderDetail"
          :key="item.id"
          :icon="item.icon"
          :text="item.text"
          :badge="item.badge"
        />
      </van-grid>
      <!-- 其他的单元格 优化-->
      <van-cell
        v-for="item in cellItem"
        :key="item.id"
        :title="item.title"
        :icon="item.icon"
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="arrow-icon" />
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderDetail: [
        { id: 1, icon: "gold-coin", text: "待付款", badge: "50" },
        { id: 2, icon: "clock", text: "待发货", badge: "99+" },
        { id: 3, icon: "checked", text: "待收货", badge: "12" },
        { id: 4, icon: "good-job", text: "待评价", badge: "66" },
      ],
      cellItem: [
        { id: "1", title: "我的优惠", icon: "coupon" },
        { id: "2", title: "修改密码", icon: "setting" },
        { id: "3", title: "我的积分", icon: "gift-card" },
        { id: "4", title: "病历档案", icon: "card" },
        { id: "5", title: "收货地址", icon: "location" },
        { id: "6", title: "我的收藏", icon: "star" },
        { id: "7", title: "帮助中心", icon: "smile-comment" },
        { id: "8", title: "客服中心", icon: "chat" },
        { id: "9", title: "商品推荐", icon: "thumb-circle" },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="scss">
.yaoCenter {
  min-width: 3.2rem;
  #bind {
    height: 4.97rem;
    background: url(http://image.360lj.com/vuser/images/head_portrait_bg.jpg) no-repeat
      center center;
    background-size: 100%;
    overflow: hidden;

    img {
      display: block;
      width: 2.05rem;
      height: 2.05rem;
      border: #fff 0.06rem solid;
      margin: 1.42rem auto 0;
      border-radius: 50%;
    }
    p {
      height: 0.62rem;
      line-height: 0.62rem;
      color: #fff;
      font-size: 0.28rem;
      text-align: center;
    }
  }
  // 单元格
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .arrow-icon {
    font-size: 16px;
    line-height: inherit;
  }
  .myorder {
    margin: 10px 0;
    border-top: 1px solid orangered;
  }
}
</style>
